<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/prewimg.css">
		<style type="text/css">
			html,
			body {
				width: 100%;
				margin-top: 0;
			}
			
			.mui-bar h1 {
				color: #008DFD;
			}
			
			.gengduo-img {
				float: right;
				width: 25px;
				margin-top: 3%;
				margin-right: 2%;
			}
			
			.mui-content {
				margin-top: 0!important;
				background-color: #F7F7F7;
				z-index: 99;
				display: none;
			}
			
			.bgcolor-div {
				width: 100%;
				background-color: white;
				padding-bottom: 2%;
			}
			
			.topimg-div {
				width: 100%;
			}
			
			.head-div {
				width: 100%;
				display: flex;
			}
			
			.padding-div {
				width: 22%;
				background: linear-gradient(white, #EDEDED);
				margin-top: -12%;
				margin-left: 3%;
				border-radius: 1px;
				display: flex;
				padding: 2px;
			}
			
			.padding-div .headimg {
				width: 100%;
				height: 100%;
			}
			
			.sex-img {
				width: 16px;
				height: 16px;
				position: absolute;
				right: 3%;
				margin-top: 1.8%;
			}
			
			.name-span {
				margin-left: 3%;
				margin-top: 1%;
			}
			
			.topimg {
				width: 100%;
			}
			
			.content-div {
				width: 94%;
				margin-left: 3%;
			}
			
			.hr-div {
				border-bottom: 1px solid #F1F1F1;
			}
			
			.hr-div input {
				margin-bottom: 0;
				font-size: 90%;
			}
			
			#gexingname {
				padding: 0;
				padding-left: 3%;
				border: 0;
				color: #767676;
			}
			
			.zhanghao-div {
				padding: 2% 0;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				border-bottom: 1px solid #F1F1F1;
				width: 100%;
				font-size: 90%;
			}
			
			.zhanghao-div .input {
				width: 80%;
				color: #363434;
				border: 0;
				margin-bottom: 0;
				margin-left: 8%;
				font-size: 96%;
			}
			
			.threebutton-div {
				width: 99.4%;
				display: flex;
				margin-top: 5%;
				margin-left: 0.3%;
				padding-bottom: 5%;
			}
			
			.mui-btn:active {
				color: #FFFFFF;
				background-color: #007AFF!important; 
			}
			
			.mui-button {
				width: 93%;
				margin-left: 3.5%;
				margin-top: 2%;
				background-color: white;
				color: #007AFF;
				border: 1.5px solid #007AFF;
			}
			
			.mui-table-view {
				background-color: #F7F7F7;
			}
			
			#imgcontent {
				width: 100%;
				padding-left: 3.5%;
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 4px;
			}
			
			.mui-card {
				background-color: white;
				width: 100%;
				margin-left: 0;
				height: auto;
				box-shadow: none!important;
			}
			
			.mui-card-header {
				border: 0!important;
			}
			
			.mui-media-body span {
				font-size: 95%;
				display: block;
			}
			
			.mui-media-body text {
				font-size: 80%;
				color: #A7A5A5;
			}
			
			.del-div {
				width: 6%;
				float: right;
				margin-top: -14px;
				margin-right: 2%;
			}
			
			.del-div img {
				width: 100%;
			}
			
			.del-div span {
				display: none;
			}
			
			.area-div {
				display: flex;
				margin-left: 3%;
				color: #A7A5A5;
				font-size: 80%;
				align-items: center;
			}
			
			.area-div .area-img {
				width: 4%;
				height: 4%;
			}
			
			.write-div {
				width: 91%;
				font-size: 90%;
				z-index: 99;
				margin-left: 3.5%;
				padding-bottom: 1%;
			}
			
			.mui-cardfooter {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				font-size: 130%;
				padding: 5px 0;
				margin: 0;
				color: #000000;
				box-shadow: none;
				border-top: 1px solid #F5F5F5;
			}
			
			.foot-cont {
				width: 33.3333%;
			}
			
			.foot-cont text {
				display: none;
			}
			
			.commentcont text {
				display: none;
			}
			
			.imgarea {
				overflow: hidden;
				background-color: aqua;
				border-radius: 2px;
			}
			
			.imgarea img {
				margin-bottom: 0;
			}
			
			.mui-card-footer-bar {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.mui-card-footer-bar span {
				margin-left: 3%;
			}
			
			.footer-num {
				font-size: 70%;
			}
			
			li {
				list-style: none;
				background-color: aqua
			}
			
			.nodong-div {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				padding: 20% 0;
				background-color: white;
				margin-top: 3%;
			}
			
			.img-div {
				width: 100%;
			}
			
			.img-png {
				width: 26%;
				margin-left: 37%;
			}
			
			.btn-div {
				width: auto;
				text-align: center;
				font-size: 80%;
				margin-bottom: 0;
				width: 100%;
				border-radius: 4px;
				margin-top: 20px;
			}
			
			.btn-div span {
				color: #BFBFBF;
			}
			
			.add-png {
				width: 7%;
				height: 7%;
				margin-bottom: 0;
			}
			
			.mui-table-view:after,.mui-table-view:before{
				background-color: white!important;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-transparent" id="header" data-scrollby=".mui-scroll-wrapper">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id="backicon"></a>
			<h1 class="mui-title">好友</h1>
			<img src="../../images/gengduo.png" class="gengduo-img" />
		</header>

		<div class="mui-content" id="mui-content">
			<div class="bgcolor-div">
				<div class="topimg-div">
					<img src="" class="topimg" id="topimg" data-preview-src="" data-preview-group="1" />
				</div>

				<div class="head-div">
					<div class="padding-div" id="headimgg"><img src="" class="headimg" id="headimg" data-preview-src="" data-preview-group="2" /></div>
					<span class="name-span" id='nickname'>将就看</span>
					<img src="" class="sex-img" id="sexpng" />
				</div>
				<div class="hr-div"><input type="text" id="gexingname" placeholder="个性签名.." disabled="false" /></div>

				<div id="" class="content-div">
					<div class="zhanghao-div"><span>账号</span><input class="input" type="text" id="zhanghao" placeholder="回显内容" disabled="false" /></div>
					<div class="zhanghao-div">院系<input class="input" type="text" id="yuanxi" placeholder="回显内容" disabled="false" /></div>
					<div class="zhanghao-div">专业<input class="input" type="text" id="zhuanye" placeholder="回显内容" disabled="false" /></div>
				</div>
				<button type="button" class="mui-btn mui-button">发消息</button>
			</div>

			<div class="nodong-div" id="nodong">
				<div class="img-div"><img src="../../images/pll.png" class="img-png" /></div>
				<div class="btn-div" id="fadong">
					<span>Ta,还没有发表任何动态</span>
				</div>
			</div>
			<div id="contimg" style="width: 100%;">
				<ul class="mui-table-view mui-table-view-chevron" id="imgggg">

				</ul>
			</div>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.zoom.js"></script>
		<script src="../../js/mui.previewimage.js"></script>
		<script src="../../js/arttmpl.js"></script>
		<script src="../../js/immersed.js"></script>
		<script src="../。。/js/app.min.js"></script>
		<script type="text/javascript">
			mui.previewImage(function(img) {
				plus.webview.currentWebview().setStyle({
					top: '0',
					bottom: '0'
				})
			}, function(img) {
				plus.webview.currentWebview().setStyle({
					top: '0',
					bottom: '0'
				})
			});
			mui.init();

			mui.ready(function() {
				mui.plusReady(function() {
					plus.nativeUI.showWaiting("加载中...");
					
					//渲染好友所有信息
					var card = plus.webview.currentWebview().card;
					var allcont = '';
					mui.ajax('https://www.lunyuwang.com/friendListController/queryFriendDetail', {
						data: {
							lyuser_Card: card,

						},
						crossDomain: true, //强制使用5+跨域
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						//processData: false,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: function(data) {

							allcont = data.queryDetail;
							document.getElementById('nickname').textContent = allcont.lyuser_NickName;
							document.getElementById('zhanghao').value = allcont.lyuser_Card;
							document.getElementById('yuanxi').value = allcont.lyuser_YuanXi;
							document.getElementById('zhuanye').value = allcont.lyuser_Major;
							document.getElementById('gexingname').value = allcont.lyuser_AWord;
							document.getElementById('topimg').src = allcont.lyuser_BackPath;
							document.getElementById('headimg').src = allcont.lyuser_FacePath;
							var sex = document.getElementById('sexpng');
							if(allcont.lyuser_Sex == 1) {
								sex.src = '../../images/man.png'
							} else {
								sex.src = '../../images/girl.png'
							}

							//定义参数类型 
							var record = data.friendDongTai;
							var dong = document.getElementById('nodong');
							if(record == '0') {
								plus.nativeUI.closeWaiting();
								document.getElementById('mui-content').style.display = 'block';
								return ;
							}
							dong.style.display = 'none';
							for(var i = 0; i < record.length; i++) {
								if(record[i].lydongtai_Img) {
									var a = '';
									a = record[i].lydongtai_Img.split(',');
									record[i].lydongtai_Img = a;
								} else {
									record[i].lydongtai_Img = '';
								}
								if(record[i].lydongtai_Whb) {
									var b = '';
									b = record[i].lydongtai_Whb.split(',');
									record[i].lydongtai_Whb = b;
								} else {
									record[i].lydongtai_Whb = '';
								}
							}

							//利用图灵接口演示聊天布局 
							//追加模板消息 
							var str = template('card-img-tigan', {
								"record": record
							});
							document.getElementById('imgggg').innerHTML = str;
							var dong = document.getElementById('nodong');
							if(record != '') {
								dong.style.display = 'none'
							}
							var viewwidth = document.body.clientWidth;
							var imgas = document.getElementsByClassName("imgcontent");
							var topimg = document.getElementById('topimg');
							var headimgg = document.getElementById('headimgg');
							topimg.style.height = "-webkit-calc(" + viewwidth * 0.65 + "px)";
							headimgg.style.height = "-webkit-calc(" + viewwidth * 0.22 + "px)";
							for(var i = 0; i < imgas.length; i++) {
								if(record[i].lydongtai_Img.length >= 3) {
									for(var j = 0; j < record[i].lydongtai_Img.length; j++) {
										var divimg = imgas[i].getElementsByTagName("div")[j];
										var imgarray = imgas[i].getElementsByTagName("img")[j];
										realbi = record[i].lydongtai_Whb[j];
										divimg.style.cssText = "width: 31%;height: -webkit-calc(" + viewwidth * 0.31 + "px);margin: 0.5% -webkit-calc(" + viewwidth * 0.005 + "px)";
										if(realbi >= 1) {
											var num = viewwidth * 0.31 * 0.5 * (realbi - 1);
											imgarray.style.cssText = "width: -webkit-calc(" + viewwidth * 0.31 * realbi + "px);height: 100%;margin-left: -webkit-calc(" + (-num) + "px);";
										} else {
											var num = (viewwidth * 0.31 / realbi - viewwidth * 0.28) / 2;
											imgarray.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth * 0.31 / realbi + "px);margin-top: -webkit-calc(" + (-num) + "px);"
										}
									}
								} else if(record[i].lydongtai_Img.length == 1) {
									var divimg = imgas[i].getElementsByTagName("div")[0];
									var imgarray = imgas[i].getElementsByTagName("img")[0];
									realbi = record[i].lydongtai_Whb[0];
									console.log(realbi);
									if(realbi >= 1) {
										divimg.style.cssText = "width: 60%;max-height: -webkit-calc(" + viewwidth * 0.9 + "px);height: -webkit-calc(" + viewwidth * 0.6 / realbi + "px);";
										imgarray.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth * 0.6 / realbi + "px);";
									} else {
										divimg.style.cssText = "width: 66%;max-height: -webkit-calc(" + viewwidth + "px);height: -webkit-calc(" + viewwidth * 0.66 / realbi + "px);";
										imgarray.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth * 0.66 / realbi + "px);"
									}
								} else if(record[i].lydongtai_Img.length == 2) {
									for(var j = 0; j < record[i].lydongtai_Img.length; j++) {
										var divimg = imgas[i].getElementsByTagName("div")[j];
										var imgarray = imgas[i].getElementsByTagName("img")[j];
										realbi = record[i].lydongtai_Whb[j];
										divimg.style.cssText = "width: 38%;height: -webkit-calc(" + viewwidth * 0.36 + "px);margin: 0.5% -webkit-calc(" + viewwidth * 0.005 + "px)";
										if(realbi >= 1) {
											var num = (viewwidth * 0.36 - viewwidth * 0.38 * realbi) / 2;
											imgarray.style.cssText = "width: -webkit-calc(" + viewwidth * 0.38 * realbi + "px);height: 100%;margin-left: -webkit-calc(" + num + "px);";
										} else {
											var num = (viewwidth * 0.38 / realbi - viewwidth * 0.36) / 2;
											imgarray.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth * 0.38 / realbi + "px);margin-top: -webkit-calc(" + (-num) + "px);"
										}
									}
								} else {
									console.log(11111111);
								}

							}
							plus.nativeUI.closeWaiting();
							document.getElementById('mui-content').style.display = 'block';
						}
					})
				})
			})

			mui.plusReady(function() {
				starbar();
				plus.navigator.setStatusBarStyle('dark');

				//点击返回事件
				var old_back = mui.back;
				//重写返回事件
				mui.back = function(){
	                //判断是否打开图片预览，如果是，就先关掉图片，否则直接关闭当前页面
	                if(document.querySelector(".mui-preview-in")){
	                    mui.previewImage().close();
	                }else{
	                	old_back();
	                	if(plus.webview.currentWebview().flag == '1'){
	                		plus.navigator.setStatusBarStyle('light');
	                	}					
	                }	    			
	            }
				
				//删除好友
				var card = plus.webview.currentWebview().card;
				var delfriend = function() {
					mui.confirm('确认删除该好友？', function(e) {
						if(e.index == 0) {
							mui.ajax('https://www.lunyuwang.com/friendListController/delFriend', {
								data: {
									lyuser_Card: plus.storage.getItem("card"),
									lyfriend_Card: card
								},
								crossDomain: true, //强制使用5+跨域
								dataType: 'json', //服务器返回json格式数据
								type: 'get', //HTTP请求类型
								timeout: 10000, //超时时间设置为10秒；
								//processData: false,
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								success: function(data) {
									if(data.state == 1) {
										mui.toast('删除成功!');
										var preView = plus.webview.currentWebview().opener(); //触发上一个页面刷新图片事件
										mui.fire(preView, 'delgoodfriend', {});
										mui.back();
									} else {
										mui.toast('删除失败!')
									}
								}
							})
						}
					})
				}
				//点击更多的弹出菜单
				mui(".mui-bar").on("tap", ".gengduo-img", function(e) {
					if(mui.os.plus) {
						var a = [{
							title: "删除好友"
						}, {
							title: '添加好友备注'
						}];
						plus.nativeUI.actionSheet({
							cancel: "取消",
							buttons: a
						}, function(b) {
							switch(b.index) {
								case 0:
									break;
								case 1:
									delfriend();
									break;
								case 2:
									fribeizhu();
									break;
								default:
									break
							}
						})
					}

				})

				//预览图片时下载文件到相册
				var imgsrc = '';
				mui(document.body).on('tap', 'img[data-preview-src]', function() {
					imgsrc = this.src;
				})
				document.getElementById('downloadbtn').addEventListener('tap', function() {
					var btnArray = ['保存', '取消'];
					mui.confirm('是否保存图片？', '保存图片到相册', btnArray, function(e) {
						if(e.index == 0) {
							var timestamp = (new Date()).valueOf();
							var downLoader = plus.downloader.createDownload(imgsrc, {
								method: 'GET'
							}, function(download, status) {
								var fileName = download.filename;
								//保存至本地相册
								plus.gallery.save(fileName, function() {
									mui.toast("保存成功");
									plus.navigator.setStatusBarStyle('dark');

								});
							});
							//开始下载任务
							downLoader.start();
						}
					})
				})
			})
		</script>

		<!--渲染模板-->
		<script type="text/template" id="card-img-tigan">
			<% for(var i in record){ var item=record[i]; %>
			<li class="li-content">
				<p style="display: none;">
					<%=item.lydongtai_Id%>
				</p>
				<div class="mui-card">
					<div class="mui-card-header mui-card-media cardtop">
						<img src="<%=item.lyuser_FacePath%>" id="tigan<%=(i+1)%>" class="imggg" />
						<div class="mui-media-body">
							<span id="name<%=(i+1)%>"><%=item.lyuser_NickName%></span>
							<text id="time<%=(i+1)%>"><%=item.lydongtai_Time%></text>
							<!--<div class="del-div"><span><%=item.lydongtai_Id%></span><img class="del-img" src="../images/caa.png" /></div>-->
						</div>
					</div>
					<div id="write-div<%=(i+1)%>" class="write-div">
						<%=item.lydongtai_Text%>
					</div>
					<div class="mui-card-content" style="margin: 1% 0">
						<div id="imgcontent" class="imgcontent">
							<% for(var j in item.lydongtai_Img){ var res=item.lydongtai_Img[j]; %>
							<div class="imgarea"><img src="<%=res%>" id="<%=(i+1)%>" data-preview-src="" data-preview-group="<%=(i+3)%>" /></div>
							<% } %>
						</div>
						<% if(item.lydongtai_Address) { %>
						<div class="area-div">
							<img src="../../images/dwei.png" class="area-img" />
							<span id=""><%=item.lydongtai_Address%></span>
						</div>
						<% } %>
					</div>
					<div class="mui-cardfooter">
						<div class="foot-cont">
							<div class="mui-card-footer-bar"><img src="../../images/zann.png" width="15%" /><span class="footer-num"><%=item.lydongtai_Good%></span></div>
						</div>
						<div class="foot-cont comment">
							<div class="mui-card-footer-bar commentcont"><text><%=item.lydongtai_Id%></text><img src="../../images/talk.png" width="15%" /><span class="footer-num">评论</span></div>
						</div>
						<div class="delete-div foot-cont">
							<div class="mui-card-footer-bar deletedt">
								<img src="../../images/forword.png" width="15%" />
								<text><%=item.lydongtai_Id%></text>
								<text><%=item.lydongtai_Img.toString()%></text>
								<span class="footer-num">转发</span>
							</div>
						</div>
					</div>
				</div>
			</li>
			<% } %>
		</script>

	</body>

</html>